<template>
    <!-- 轮询消息 -->
    <transition name="fade">
        <div id="Polling" v-if="show">{{ websockData }}</div>
    </transition>
</template>

<script>
    import api from '@/utils/api';

    export default {
        name: "marquee-tips",
        data() {
            return {
                websock: null,
                websockData: '',
                show: false
            }
        },
        created() {
            this.polling()
        },
        beforeDestroy() {
            this.websock.close();
        },
        methods: {
            polling() {
                var that = this;
                let websock = new WebSocket("wss://socket.woyaorenqi.com:2346");
                websock.onopen = function() {

                };
                websock.onmessage = function(e) {
                    that.websockData = e.data
                };
                this.websock = websock;
            }
        },
        watch: {
            websockData(val) {
                this.show = true
                setTimeout(() => {
                    this.show = false
                },2000)
            }
        }
    }
</script>

<style scoped>

    #Polling {
        position: fixed;
        top: 1rem;
        left: .1rem;
        padding: .1rem .3rem;
        border-radius: .2rem;
        color: #fff;
        z-index: 9999;
        font-weight: 600;
        font-size: .4rem;
        background: rgba(0,0,0,.5);
    }

</style>
